<template>
  <el-dialog
    :visible.sync="showTodayVisitors"
    :before-close="handleClose"
    :append-to-body="false"
    :width="showMobilePage?'100%':'700px'"
    class="create-settle-dialog cost-config-dialog chart-dialog"
  >
    <Title title="今日访问用户" style="margin-bottom: 12px;" />
    <el-table
      v-loading="listloading"
      :data="listData"
      :max-height="tableHeight"
      class="fb-table"
      element-loading-text="加载中..."
      empty-text="暂无数据"
      header-cell-class-name="order-data-header-cell"
      fit
      hightlight-current-row>
      <el-table-column align="left" label="用户名" min-width="120">
        <template slot-scope="scope">
          <div class="user-row">
            <img :src="scope.row.avatar || userAvatar" alt="avatar">
            <ToolTip :content="scope.row.userName" />
          </div>
        </template>
      </el-table-column>
      <el-table-column align="left" label="职位" min-width="120">
        <template slot-scope="scope">
          <ToolTip :content="scope.row.post" />
        </template>
      </el-table-column>
      <el-table-column align="left" label="最近访问时间" width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.lastTime | format('YYYY/MM/DD HH:mm') }}</span>
        </template>
      </el-table-column>
    </el-table>
    <div style="display:flex;justify-content:flex-end;margin-top:10px;">
      <el-pagination
        :current-page="page"
        :page-size="perPage"
        :total="total"
        :pager-count="5"
        :page-sizes="[20, 50, 100, 250, 500]"
        :layout="showMobilePage ? 'total, prev, next, jumper' : 'total, prev, next, sizes, jumper'"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </div>
  </el-dialog>
</template>

<script>
import Title from '@/components/Title';
import { getDataInfo } from '@/api/home';
import { format } from '@/filters/date';
import userAvatar from '@/assets/user-avatar.png';
import { mapState } from 'vuex';

export default {
  components: {
    Title
  },
  filters: { format },
  data() {
    return {
      page: 1,
      perPage: 20,
      listloading: false,
      total: 0,
      listData: {
        items: []
      },
      tableHeight: '',
      showTodayVisitors: false,
      userAvatar
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    })
  },
  created() {
    this.getData();
  },
  methods: {
    openDialog() {
      const clientHeight = window.innerHeight;
      this.tableHeight = (clientHeight * 3) / 5;
      this.showTodayVisitors = true;
    },
    handleSizeChange(val) {
      this.perPage = val;
      this.getData(true);
    },
    handleCurrentChange(toPage) {
      this.page = toPage;
      this.getData();
    },
    handleClose() {
      this.showTodayVisitors = false;
    },
    handleData(tableData) {
      return tableData.slice((this.page - 1) * this.perPage, this.page * this.perPage);
    },
    getData(reset = false) {
      this.listLoading = true;
      getDataInfo().then(res => {
        if (res.code === 200) {
          if (reset) this.page = 1;
          this.total = res.data.lastedLoginUser.length;
          this.listData = this.handleData(res.data.lastedLoginUser);
          this.listloading = false;
        }
      }).catch(err => {
        this.listloading = false;
        console.error(err.message);
      });
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep {
  .el-dialog{
    border-radius: 8px !important;
    .el-dialog__header {
      padding: 0px;
      padding-bottom: 0px;
    }
  }
  .el-dialog__body {
    padding-bottom: 10px;
  }
  .el-pagination__jump {
    margin-left: 0;
  }
}
.user-row {
  display: flex;
  align-items: center;
  img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-right: 10px;
  }
}
</style>
